<template>
  <div class="login-box">
    <el-card id="big-card" class="box-card">
      <el-card id="login-card" class="box-card">
        <el-tabs v-model="activeName">
          <el-tab-pane id="login" label="登录" name="first">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="昵称" prop="name"
                ><el-input v-model="ruleForm.name"></el-input
              ></el-form-item>

              <el-form-item label="密码" prop="pass"
                ><el-input
                  type="password"
                  v-model="ruleForm.pass"
                  auto-complete="off"
                ></el-input
              ></el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >登录</el-button
                >

                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="second">
            <register></register>
          </el-tab-pane>
          <el-tab-pane > </el-tab-pane>
          <el-tab-pane label="管理员登录" name="thirdly">
            <admin>
              <admin-login></admin-login>
            </admin>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <div class="block">
        <el-image
          style="width: 60%; height: 400px"
          :src="url"
          fit="contain"
        ></el-image>
      </div>
    </el-card>
  </div>
</template>
  
<script>
import register from "@/components/Register";
import { setToken, SetUserId, SetUserName } from "../utils/auth";
import { login } from "../api/index";
import adminLogin from './Admin.vue';


export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }

        callback();
      }
    };
    return {
      url: require("../../imgs/loginImg.png"),

      activeName: "first",
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
      },
      res: {
        username: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
      },
    };
  },

  methods: {
    //选项卡切换
    // handleClick(tab, event) {},
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //登录按钮
    submitForm() {
      var uname = this.ruleForm.name;
      var pword = this.ruleForm.pass;

      login({ username: uname, password: pword })
        .then(({ data }) => {
          console.log(data.code);
          if (data.code === 1000) {
            console.log(data);
            SetUserId(data.data.userId);
            SetUserName(data.data.username);
            setToken(data.data.token, data.data.refreshToken);
            this.$router.push({ path: "/" });
          } else {
            alert("用户名密码错误");
          }
        })
        .catch((err) => {
          console.log(err);
          console.log("用户名密码错误");
        });
    },
  },
  mounted() {},
  components: {
    register,
    adminLogin
  },
};
</script>
  
<style >
body {
  background-color: whitesmoke;
  /* background-color:whitesmoke; */
}

.el-tabsitem {
  text-align: center;
  width: 60px;
}

.login-box {
  height: 780px;
}

#big-card {
  margin: auto;
  width: 1200px;
  height: 100%;
}

#login-card {
  width: 100%;
  /* background-color:lightgrey */
  background-image: linear-gradient(darkgray, whitesmoke);
}

#login {
  margin: auto;
  width: 500px;
}

#tab-2{
   width:900px
}
</style>